<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0,
           maximum-scale=1.0, minimum-scale=1.0"/>
    <title>angular切换与传值(ngRoute)</title>
    <script src="js/angular.js"></script>
    <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body>
<!--初始化中全部是以key=value来书写的-->
    <div ng-app="hao">
        <div class="header">
            <a href="#div1">第一个div</a>
            <a href="#div2">第二个div</a>
            <a href="#div3">第三个div</a>
        </div>
        <!-- 需要通过ng-view来获取 -->
        <div ng-view></div>
    </div>
</body>

<script type="text/javascript">
    /*
    *  .when('/',{template:'这是首页页面'});这种写法的“/”表示是本页
    *   controller:"div1Controller";此处的controller也可以不配置
    *   template或者为templateUrl 需要配置
    *   template是字符串，templateUrl可以链接一个完成页面
    *   redirectTo:'/div1'  指默认的页面；有点类是if() else if() else
    *   $routeProvider 这个单词不能写错哦
    * */
    var app=angular.module("hao",['ngRoute']);
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/div1',{
            template:'<p>这个看起来好不错1</p>',
            controller:"div1Controller"
        }).when('/div2',{
            templateUrl:'ceshi.html',
            controller:"div2Controller"
        }).when('/div3',{
            template:'<p>这个看起来好不错3</p>',
            controller:"div3Controller"
        }).otherwise({
            redirectTo:'/div1'
        });
    }]);

    app.controller('div1Controller',['$scope', function ($scope) {
//        $scope.text="11111";
    }]);

    app.controller('div2Controller',['$scope', function ($scope) {
//        $scope.text="22222";
    }]);

    app.controller('div3Controller',['$scope', '$routeParams', function ($scope,$routeParams) {
//        $scope.text="33333";
    }]);

</script>
</html>